<template>
    <div class="maxArea">
      <img :src="businessImg" alt="">
      <div class="maxBtn">
        <div class="maxLeft">
          <p class="p1">{{name}}</p>
          <p class="p2">{{briefly}}</p>
        </div>
        <div class="maxRight">
          <p><span>¥</span> {{money}}</p>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    props: ['businessImg', 'name', 'briefly', 'money'],
  }
</script>
<style>
.maxArea{
  height: 480rpx;
  margin: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 0 8rpx 1rpx rgba(0,0,0,0.1);
}
.maxArea img{
  height: 350rpx;
  width: 100%;
}
  .maxBtn{
    height: 130rpx;
    display: column;
  }
.maxBtn .maxLeft{
  width: 70%;
  float: left;
}
.maxLeft .p1{
  font-size: 28rpx;
  color: #3e3e3e;
  font-weight: bold;
  margin-top: 20rpx;
  text-indent: 42rpx;
}
.maxLeft .p2{
  font-size: 24rpx;
  color: #999999;
  text-indent: 42rpx;
  margin-top: 10rpx;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.maxBtn .maxRight{
  width: 30%;
  float: left;
  height: 100%;
  text-align: center;
  line-height: 130rpx;
}
  .maxRight span{
    font-size: 30rpx;
  }
.maxRight p{
  font-weight: bold;
  font-size: 48rpx;
  color: #ee3f8e;
}

</style>
